<template>
	<view class="flex justify-center align-center loading-center" :class="bgCuColor" :style="[{cuStyle}]" @click="click">
		<text class="cu-loading cuIcon-loading2" v-if="status=='loading'"></text> {{msg}}
	</view>
</template>

<script>
	/**
	 * cu-loadmore 加载更多
	 */
	export default {
		name: 'cu-loadmore',
		props: {
			status: {
				type: String,
				default: 'hasmore'
			},
			hasmoreText: {
				type: String,
				default: '点击或上拉加载更多'
			},
			loadingText: {
				type: String,
				default: '加载中…'
			},
			nomoreText: {
				type: String,
				default: '没有更多了'
			},
			bgColor: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: 'text-gray'
			},
		},
		computed: {
			msg() {
				let msg = '';
				switch (this.status) {
					case 'hasmore':
						msg = this.hasmoreText;
						break;
					case 'loading':
						msg = this.loadingText;
						break;
					case 'nomore':
						msg = this.nomoreText;
						break;
				}
				return msg;
			},
			bgCuColor() {
				let cl = '';
				if (this.bgColor.indexOf('bg-') != -1) {
					cl = this.bgColor;
				}
				if (this.color.indexOf('text-') != -1) {
					cl += ' ' + this.color;
				}
				return cl;
			},
			cuStyle() {
				let style = {}
				if (this.bgColor.indexOf('bg-') == -1) {
					style.backgroundColor = this.bgColor;
				}
				if (this.color.indexOf('text-') == -1) {
					style.color = this.color;
				}
				return style;
			}
		},
		data() {
			return {}
		},
		methods: {
			click() {
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading-center::before {
		content: "";
		height: 0px;
		margin-right: 10rpx;
		z-index: 0;
		width: 45rpx;
		border-bottom: 1px solid #d4d4d4;
	}
	.loading-center::after {
		content: "";
		height: 0px;
		margin-left: 10rpx;
		z-index: 0;
		width: 45rpx;
		border-bottom: 1px solid #d4d4d4;
	}
	.cu-loading {
		animation: cuIcon-spin 2s infinite linear;
	}
</style>
